<template>
  <div class="honeHotActive">
	  <div class="wrapper">
		  <div class="content_top">
			  <img src="@/assets/img/rBLkBlqo1SmAXKh2AAATQxd5x9Q718 (1).png">
			  <div class="content_top_time"><span>还剩</span> <span class="timeNum" >{{timeHour}}</span>:
			  <span class="timeNum" >{{timeMinute}}</span>:<span class="timeNum" >{{timeSecond}}</span></div>
		  </div>
		  <div class="content_bottom" v-for='item of HotActiveContent' :key='item.id'>
			  <div class="content_bottom_img">
				  <img :src="item.imgUrl">
				  <span>{{item.Num}}</span>
			  </div>
			  <div class="content_bottom_desc">
				  <p>{{item.content}}</p>
				  <div class='content_prise'>
					  <span class="desc_prise"><span class="Rmb">¥</span><span class="prise">{{item.prise}}</span>起</span>
					  <span class="more">更多抢购 ></span>
				  </div>
			  </div>
		  </div>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'homeHotActive',
  data(){
	  return{
		  endTime:'2020/06/09 18:00:00',
		  timeHour:'01',
		  timeMinute:'02',
		  timeSecond:'03',
		  HotActiveContent:[
			  {
				  id:'001',
				  imgUrl:'//pic5.40017.cn/01/001/ba/4b/rBLkBlriwOaATwGFAAD7GtVNvnw648.jpg',
				  content:'【避暑胜地】河北秦皇岛休闲游，入住北戴河爱这海酒店，提供广式早茶+火车站接送，2人起订哦',
				  prise:'369.00',
				  Num:'限量60份'
			  }
		  ]
	  }
  },
  methods:{
	  timeFun(){
		  let endTime=new Date(this.endTime)
		  let nowTime=new Date()
		  let t=parseInt((endTime-nowTime)/1000)
		  let hh=0;
		  let mm=0;
		  let ss=0;
		  hh=parseInt(t/3600)
		  mm=parseInt((t%3600)/60)
		  ss=parseInt(((t%3600)%60))
		  if(hh<10){
			  this.timeHour="0"+hh.toString()
		  }else{
			  this.timeHour=hh
		  }
		  if(mm<10){
			  this.timeMinute="0"+mm.toString()
		  }else{
			  this.timeMinute=mm
		  }
		  if(ss<10){
			  this.timeSecond="0"+ss.toString()
		  }else{
			  this.timeSecond=ss
		  }
		  
	  },
  },
  mounted(){
	  this.timeFun()
	  setInterval(this.timeFun,1000)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.honeHotActive
	border-top:8px solid #e4e4e4
	width:100%
	.wrapper
		width:90%
		margin:0 auto
		padding:0.22rem 0
		position:relative
		.content_top
			position:relative
		.content_top>img
			width:20%
		.content_top_time
			font-size:0.3rem
			float:right
			position: absolute
			top: 50%
			right:0
			transform: translateY(-50%)
			.timeNum
				background:#000
				border-radius:0.1rem
				color:#fff
		.content_bottom
			margin-top:.2rem
			position:relative
			display:flex
			.content_bottom_img
				width:50%
			.content_bottom_img>img
				width:100%
				height:2rem
			.content_bottom_img>span
				position:absolute
				top:0
				left:0
				background:#ff5f5f
				padding:0.08rem 0.08rem
				color:#fff
			.content_bottom_desc
				width:60%
				margin-left:0.3rem
				position:relative
				.content_prise
					width:100%
					position:absolute
					bottom:0
					.desc_prise
						.Rmb
							color:#ff5346
						.prise
							color:#ff5346
							font-size:0.4rem
					.more
						float:right
						margin-top:0.1rem
			.content_bottom_desc>p
				max-height: 1.06667rem;
				color: #404040;
				font-size: .3rem;
				line-height: .4rem;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			

</style>
